<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Model List</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Model List</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>
A Model List is an array-like ordered list of <a href="../model/index.html">Model</a> instances with methods for adding, removing, sorting, filtering, and performing other actions on models in the list.
</p>

<p>
A Model instance may exist in zero or more lists. All events fired by a model automatically bubble up to all the lists that contain that model, so lists serve as convenient aggregators for model events.
</p>

<p>
<code>Y.ModelList</code> also exposes a sync API similar to the one used by <code>Y.Model</code>, making it easy to implement syncing logic to load lists of models from a persistence layer or remote server.
</p>
</div>

<h2 id="getting-started">Getting Started</h2>

<p>
To include the source files for Model List and its dependencies, first load
the YUI seed file if you haven't already loaded it.
</p>

<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>


<p>
Next, create a new YUI instance for your application and populate it with the
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
YUI will automatically load any dependencies required by the modules you
specify.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
YUI().use(&#x27;model-list&#x27;, function (Y) {
    &#x2F;&#x2F; Model List is available and ready for use. Add implementation
    &#x2F;&#x2F; code here.
});</pre>


<p>
For more information on creating YUI instances and on the
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
documentation for the <a href="../yui/index.html">YUI Global object</a>.
</p>


<h2 id="using-model-list">Using Model List</h2>

<h3 id="instantiating-a-model-list">Instantiating a Model List</h3>

<p>
Most of the classes in the App Framework are meant to be extended, but if your needs are simple and you don't plan to implement a custom sort comparator or sync layer for your lists, you can probably just instantiate <code>Y.ModelList</code> directly.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Instantiate a new list that will contain instances of the Y.PieModel model
&#x2F;&#x2F; class.
var list = new Y.ModelList({model: Y.PieModel});</pre>


<p>
The <code>model</code> config parameter configures the list to contain models that are instances of the <code>Y.PieModel</code> class (which you can read more about in the <a href="../model/index.html">Model User Guide</a>).
</p>

<p>
You're not strictly required to provide a <code>model</code> class, but doing so will allow you to pass plain hashes of attributes to the list's <code>add()</code> and <code>create()</code> methods and have them automatically turned into model instances. If you don't specify a <code>model</code> class, you'll need to pass existing model instances to these methods.
</p>

<h3 id="extending-ymodellist">Extending <code>Y.ModelList</code></h3>

<p>
Extending the <code>Y.ModelList</code> class allows you to create a custom class in which you may provide a custom sort comparator function, sync layer, or other logic specific to your lists. This is optional, but is a great way to add custom functionality to a model list in an efficient and maintainable way.
</p>

<p>
In this example, we'll create a <code>Y.PieList</code> class. Each instance of this class will contain <code>Y.PieModel</code> instances representing delicious pies.
</p>

<pre class="code prettyprint">Y.PieList = Y.Base.create(&#x27;pieList&#x27;, Y.ModelList, [], {
  &#x2F;&#x2F; Add prototype properties and methods for your List here if desired. These
  &#x2F;&#x2F; will be available to all instances of your List.

  &#x2F;&#x2F; Specifies that this list is meant to contain instances of Y.PieModel.
  model: Y.PieModel,

  &#x2F;&#x2F; Returns an array of PieModel instances that have been eaten.
  eaten: function () {
    return Y.Array.filter(this.toArray(), function (model) {
      return model.get(&#x27;slices&#x27;) === 0;
    });
  },

  &#x2F;&#x2F; Returns the total number of pie slices remaining among all the pies in
  &#x2F;&#x2F; the list.
  totalSlices: function () {
    var slices = 0;

    this.each(function (model) {
      slices += model.get(&#x27;slices&#x27;);
    });

    return slices;
  }
});</pre>


<p>
You can now create instances of <code>Y.PieList</code>.
</p>

<pre class="code prettyprint">var pies = new Y.PieList();</pre>


<h3 id="adding-removing-and-retrieving-models">Adding, Removing, and Retrieving Models</h3>

<h4 id="adding-models">Adding Models</h4>

<p>
Use the <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_add"><code>add()</code></a>, <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_create"><code>create()</code></a>, and <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_reset"><code>reset()</code></a> methods to put models into a list.
</p>

<p>
The difference between <code>add()</code> and <code>create()</code> is that <code>add()</code> simply adds one or more models to the list, while <code>create()</code> first saves a model and only adds it to the list once the model's sync layer indicates that the save operation was successful.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Add a single model to the list.
pies.add(new Y.PieModel({type: &#x27;pecan&#x27;}));

&#x2F;&#x2F; Add multiple models to the list.
pies.add([
  new Y.PieModel({type: &#x27;apple&#x27;}),
  new Y.PieModel({type: &#x27;maple custard&#x27;})
]);

&#x2F;&#x2F; Save a model, then add it to the list.
pies.create(new Y.PieModel({type: &#x27;pumpkin&#x27;}));</pre>


<p>
If your list's <code>model</code> property is set to a model class, then you can just pass attribute hashes to the <code>add()</code> and <code>create()</code> methods, and the list will automatically create new model instances for you.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Add a single model to the list.
pies.add({type: &#x27;pecan&#x27;});

&#x2F;&#x2F; Add multiple models to the list.
pies.add([
  {type: &#x27;apple&#x27;},
  {type: &#x27;maple custard&#x27;}
]);

&#x2F;&#x2F; Save a model, then add it to the list.
pies.create({type: &#x27;pumpkin&#x27;});</pre>


<p>
The <code>create()</code> method accepts an optional callback function, which will be executed when the save operation finishes. Provide a callback if you'd like to be notified of the success or failure of the save operation.
</p>

<pre class="code prettyprint">pies.create({type: &#x27;watermelon chiffon&#x27;}, function (err) {
  if (!err) {
    &#x2F;&#x2F; The save operation was successful!
  }
});</pre>


<p>
The <code>reset()</code> method removes any models that are already in the list and then adds the models you specify. Instead of generating many <code>add</code> and <code>remove</code> events, the <code>reset()</code> method only generates a single <code>reset</code> event. Use <code>reset()</code> when you need to repopulate the entire list efficiently.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Remove all existing models from the list and add new ones.
pies.reset([
  {type: &#x27;lemon meringue&#x27;},
  {type: &#x27;banana cream&#x27;}
]);</pre>


<p>
You can also call <code>reset()</code> with no arguments to quickly empty the list.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Empty the list.
pies.reset();</pre>


<p>
Models are automatically inserted into the list at the correct index based on the current sort comparator, so the list is always guaranteed to be sorted. By default, no sort comparator is defined, so models are sorted in insertion order. See <a href="#creating-a-custom-sort-comparator">Creating a Custom Sort Comparator</a> for details on customizing how a list is sorted.
</p>

<h4 id="retrieving-models">Retrieving Models</h4>

<p>
Models in the list can be retrieved by their <code>id</code> attribute, their <code>clientId</code> attribute, or by their numeric index within the list.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Look up a model by its id.
pies.getById(&#x27;1234&#x27;);

&#x2F;&#x2F; Look up a model by its clientId.
pies.getByClientId(&#x27;pie_42&#x27;);

&#x2F;&#x2F; Look up a model by its numeric index within the list.
pies.item(0);

&#x2F;&#x2F; Find the index of a model instance within the list.
pies.indexOf(pies.getById(&#x27;1234&#x27;));</pre>


<h4 id="removing-models">Removing Models</h4>

<p>
Pass a model or array of models to the <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_remove"><code>remove()</code></a> method to remove them from the list.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Remove a single model from the list.
pies.remove(pies.getById(&#x27;1234&#x27;));

&#x2F;&#x2F; Remove multiple models from the list.
pies.remove([
  pies.getById(&#x27;1235&#x27;),
  pies.getById(&#x27;1236&#x27;)
]);</pre>


<p>
This will only remove the specified model instances from the list; it won't actually call the models' <a href="http://yuilibrary.com/yui/docs/api/classes/Model.html#method_destroy"><code>destroy()</code></a> methods or delete them via the models' sync layer. Calling a model's <code>destroy()</code> method will automatically remove it from any lists it's in, so that would be a better option if you want to both remove and destroy or delete a model.
</p>

<h3 id="list-attributes">List Attributes</h3>

<p>
Model Lists themselves don't provide any attributes, but calling the <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_get"><code>get()</code></a>, <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_getAsHTML"><code>getAsHTML()</code></a>, or <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_getAsURL"><code>getAsURL()</code></a> methods on the list will return an array containing the specified attribute values from every model in the list.
</p>

<pre class="code prettyprint">pies.add([
  {type: &#x27;pecan&#x27;},
  {type: &#x27;strawberries &amp; cream&#x27;},
  {type: &#x27;blueberry&#x27;}
]);

pies.get(&#x27;type&#x27;);
&#x2F;&#x2F; =&gt; [&quot;pecan&quot;, &quot;strawberries &amp; cream&quot;, &quot;blueberry&quot;]

pies.getAsHTML(&#x27;type&#x27;);
&#x2F;&#x2F; =&gt; [&quot;pecan&quot;, &quot;strawberries &amp;amp; cream&quot;, &quot;blueberry&quot;]

pies.getAsURL(&#x27;type&#x27;);
&#x2F;&#x2F; =&gt; [&quot;pecan&quot;, &quot;strawberries%20%26%20cream&quot;, &quot;blueberry&quot;]</pre>


<h3 id="list-events">List Events</h3>

<p>
Model List instances provide the following events:
</p>

<table>
  <thead>
    <tr>
      <th>Event</th>
      <th>When</th>
      <th>Payload</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>add</code></td>
      <td>A model is added to the list.</td>
      <td>
        <dl>
          <dt><code>model</code> (<em>Y.Model</em>)</dt>
          <dd>
            The model instance being added.
          </dd>

          <dt><code>index</code> (<em>Number</em>)</dt>
          <dd>
            The index at which the model will be added.
          </dd>
        </dl>
      </td>
    </tr>

    <tr>
      <td><code>error</code></td>
      <td>An error occurs, such as when an attempt is made to add a duplicate model to the list, or when a sync layer response can't be parsed.</td>
      <td>
        <dl>
          <dt><code>error</code> (<em>Any</em>)</dt>
          <dd>
            Error message, object, or exception generated by the error. Calling <code>toString()</code> on this should result in a meaningful error message.
          </dd>

          <dt><code>src</code> (<em>String</em>)</dt>
          <dd>
            <p>
            Source of the error. May be one of the following (or any custom error source defined by a ModelList subclass):
            </p>

            <dl>
              <dt><code>add</code></dt>
              <dd>
                Error while adding a model (probably because it's already in the list and can't be added again). The model in question will be provided as the <code>model</code> property on the event facade.
              </dd>

              <dt><code>parse</code></dt>
              <dd>
                An error parsing a JSON response. The response in question will be provided as the <code>response</code> property on the event facade.
              </dd>

              <dt><code>remove</code></dt>
              <dd>
                Error while removing a model (probably because it isn't in the list and can't be removed). The model in question will be provided as the <code>model</code> property on the event facade.
              </dd>
            </dl>
        </dl>
      </td>
    </tr>

    <tr>
      <td><code>remove</code></td>
      <td>A model is removed from the list.</td>
      <td>
        <dl>
          <dt><code>model</code> (<em>Y.Model</em>)</dt>
          <dd>
            The model instance being removed.
          </dd>

          <dt><code>index</code> (<em>Number</em>)</dt>
          <dd>
            The index of the model being removed.
          </dd>
        </dl>
      </td>
    </tr>

    <tr>
      <td><code>reset</code></td>
      <td>The list is completely reset or sorted.</td>
      <td>
        <dl>
          <dt><code>models</code> (<em>Array</em>)</dt>
          <dd>
            Array of the list's new models after the reset.
          </dd>

          <dt><code>src</code> (<em>String</em>)</dt>
          <dd>
            Source of the event. May be either "reset" or "sort".
          </dd>
        </dl>
      </td>
    </tr>
  </tbody>
</table>

<p>
Each of these events is preventable, which means you can subscribe to the "on" phase of an event and call <code>e.preventDefault()</code> in your subscriber function to prevent the event from actually occurring. This works because "on" subscribers actually run before an event causes any default logic to run.
</p>

<p>
For example, you could prevent a model from being added to the list like this:
</p>

<pre class="code prettyprint">pies.on(&#x27;add&#x27;, function (e) {
  if (e.model.get(&#x27;type&#x27;) === &#x27;rhubarb&#x27;) {
    &#x2F;&#x2F; Eww. No rhubarb for me please.
    e.preventDefault();
  }
});</pre>


<p>
If you only want to be notified <em>after</em> an event occurs, and only when that event wasn't prevented, subscribe to the "after" phase.
</p>

<pre class="code prettyprint">pies.after(&#x27;add&#x27;, function (e) {
  &#x2F;&#x2F; Only runs after a model is successfully added to the list.
});</pre>


<h4 id="subscribing-to-bubbled-model-events">Subscribing to Bubbled Model Events</h4>

<p>
A model's events bubble up to any model lists it belongs to. This means, for example, that you can subscribe to the <code>*:change</code> event on the list to be notified whenever the <code>change</code> event of any model in the list is fired.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Subscribe to change events from all models in the &#x60;pies&#x60; model list.
pies.on(&#x27;*:change&#x27;, function (e) {
  &#x2F;&#x2F; e.target is a reference to the model instance that caused the event.
  var model  = e.target,
      slices = e.changed.slices;

  if (slices &amp;&amp; slices.newVal &lt; slices.prevVal) {
    Y.log(&#x27;Somebody just ate a slice of &#x27; + model.get(&#x27;type&#x27;) + &#x27; pie!&#x27;);
  }
});</pre>


<p>
If a model exists in more than one list, its events will bubble up to all the lists it's in.
</p>

<h3 id="manipulating-the-list">Manipulating the List</h3>

<p>
Model Lists extend <code>Y.ArrayList</code>, which means they provide many convenient array-like methods for manipulating the list of models.
</p>

<p>
For example, you can use <code>each()</code> and <code>some()</code> to iterate over the list, <code>size()</code> to get the number of models in the list, and <code>map()</code> to pass each model in the list to a function and return an array of that function's return values.
</p>

<p>
For more details, see the <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html">Model List API docs</a>.
</p>

<h2 id="creating-a-custom-sort-comparator">Creating a Custom Sort Comparator</h2>

<p>
When a model is added to a list, it's automatically inserted at the correct index to maintain the sort order of the list. This sort order is determined by the return value of the list's optional <code>comparator()</code> function.
</p>

<p>
By default, lists don't have a comparator function, so models are sorted in the order they're added. To customize how models are sorted, override your list's <code>comparator()</code> function with a function that accepts a single model instance as an argument and returns a value that should be compared with return values from other models to determine the sort order.
</p>

<pre class="code prettyprint">Y.PieList = Y.Base.create(&#x27;pieList&#x27;, Y.ModelList, [], {
  &#x2F;&#x2F; ... prototype methods and properties ...

  &#x2F;&#x2F; Custom comparator to keep pies sorted by type.
  comparator: function (model) {
    return model.get(&#x27;type&#x27;);
  }
});</pre>


<p>
If you change the comparator function after models have already been added to the list, you can call the list's <code>sort()</code> function to re-sort the entire list.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Change the comparator of a pie list and re-sort it after adding some pies.
var pies = new Y.PieList();

pies.add([
  {type: &#x27;chocolate cream&#x27;, slices: 8},
  {type: &#x27;dutch apple&#x27;, slices: 6}
]);

pies.get(&#x27;type&#x27;);
&#x2F;&#x2F; =&gt; [&#x27;chocolate cream&#x27;, &#x27;dutch apple&#x27;]

pies.comparator = function (model) {
  return model.get(&#x27;slices&#x27;);
};

pies.sort();

pies.get(&#x27;type&#x27;);
&#x2F;&#x2F; =&gt; [&#x27;dutch apple&#x27;, &#x27;chocolate cream&#x27;]</pre>


<p>
Behind the scenes, ModelList passes each model to the <code>comparator()</code> method and then performs a simple natural order comparison on the return values to determine whether a given model should be sorted above, below, or at the same position as another model. The logic looks like this:
</p>

<pre class="code prettyprint">&#x2F;&#x2F; &#x60;a&#x60; and &#x60;b&#x60; are both Model instances.
function (a, b) {
  &#x2F;&#x2F; &#x60;this&#x60; is the current ModelList instance.
  var aValue = this.comparator(a),
      bValue = this.comparator(b);

  return aValue &lt; bValue ? -1 : (aValue &gt; bValue ? 1 : 0);
}</pre>


<p>
If necessary, you can override ModelList's protected <code>_sync()</code> method (note the underscore prefix) to further customize this sorting logic.
</p>

<h2 id="implementing-a-list-sync-layer">Implementing a List Sync Layer</h2>

<p>
A list's <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_load"><code>load()</code></a> method internally calls the list's <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_sync"><code>sync()</code></a> method to carry out the load action. The default <code>sync()</code> method doesn't actually do anything, but by overriding the <code>sync()</code> method, you can provide a custom sync layer.
</p>

<p>
A sync layer might make Ajax requests to a remote server, or it might act as a wrapper around local storage, or any number of other things.
</p>

<p>
A Model List sync layer works exactly the same way as a <a href="../model/index.html">Model</a> sync layer, except that only the <code>read</code> action is currently supported.
</p>

<h3 id="the-sync-method">The <code>sync()</code> Method</h3>

<p>
When the <code>sync()</code> method is called, it receives three arguments:
</p>

<dl>
  <dt><strong><code>action</code> (<em>String</em>)</strong></dt>
  <dd>
    <p>
    A string that indicates the intended sync action. May be one of the following values:
    </p>

    <dl>
      <dt><strong><code>read</code></strong></dt>
      <dd>
        <p>
        Read an existing list of models.
        </p>
      </dd>

      <dd><em>Other values are not currently supported, but may be added in a future release.</em></dd>
    </dl>
  </dd>

  <dt><strong><code>options</code> (<em>Object</em>)</strong></dt>
  <dd>
    <p>
    A hash containing any options that were passed to the <code>load()</code> method. This may be used to pass custom options to a sync layer.
    </p>
  </dd>

  <dt><strong><code>callback</code> (<em>Function</em>)</strong></dt>
  <dd>
    <p>
    A callback function that should be called when the sync operation is complete. The callback expects to receive the following arguments:
    </p>

    <dl>
      <dt><strong><code>err</code></strong></dt>
      <dd>
        <p>
        Error message or object if an error occured, <code>null</code> or <code>undefined</code> if the operation was successful.
        </p>
      </dd>

      <dt><strong><code>response</code></strong></dt>
      <dd>
        <p>
        Response from the persistence layer, if any. This will be passed to the <code>parse()</code> method to be parsed.
        </p>
      </dd>
    </dl>
  </dd>
</dl>

<p>
Implementing a sync layer is as simple as handling the requested sync action and then calling the callback function. Here's a sample sync layer that loads a list of models from local storage:
</p>

<pre class="code prettyprint">Y.PieList = Y.Base.create(&#x27;pieList&#x27;, Y.ModelList, [], {
  &#x2F;&#x2F; ... prototype methods and properties ...

  &#x2F;&#x2F; Custom sync layer.
  sync: function (action, options, callback) {
    var data;

    if (action === &#x27;read&#x27;) {
      data = localStorage.getItem(&#x27;pies&#x27;) || [];
      callback(null, data);
    } else {
      callback(&#x27;Unsupported sync action: &#x27; + action);
    }
  }
});</pre>


<h3 id="the-parse-method">The <code>parse()</code> Method</h3>

<p>
Depending on the kind of response your sync layer returns, you may need to override the <a href="http://yuilibrary.com/yui/docs/api/classes/ModelList.html#method_parse"><code>parse()</code></a> method as well. The default <code>parse()</code> implementation can parse either a JavaScript array of model hashes or a JSON string that represents a JavaScript array of model hashes. If your response data is in another format, such as a nested JSON object or XML, override the <code>parse()</code> method to provide a custom parser implementation.
</p>

<p>
If an error occurs while parsing a response, fire an <code>error</code> event with <code>type</code> "parse".
</p>

<p>
This sample demonstrates a custom parser for responses in which the list data is contained in a <code>data</code> property of the response object.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Custom response parser.
parse: function (response) {
  if (response.data) {
    return response.data;
  }

  this.fire(&#x27;error&#x27;, {
    type : &#x27;parse&#x27;,
    error: &#x27;No data in the response.&#x27;
  });
}</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#getting-started">Getting Started</a>
</li>
<li>
<a href="#using-model-list">Using Model List</a>
<ul class="toc">
<li>
<a href="#instantiating-a-model-list">Instantiating a Model List</a>
</li>
<li>
<a href="#extending-ymodellist">Extending <code>Y.ModelList</code></a>
</li>
<li>
<a href="#adding-removing-and-retrieving-models">Adding, Removing, and Retrieving Models</a>
<ul class="toc">
<li>
<a href="#adding-models">Adding Models</a>
</li>
<li>
<a href="#retrieving-models">Retrieving Models</a>
</li>
<li>
<a href="#removing-models">Removing Models</a>
</li>
</ul>
</li>
<li>
<a href="#list-attributes">List Attributes</a>
</li>
<li>
<a href="#list-events">List Events</a>
<ul class="toc">
<li>
<a href="#subscribing-to-bubbled-model-events">Subscribing to Bubbled Model Events</a>
</li>
</ul>
</li>
<li>
<a href="#manipulating-the-list">Manipulating the List</a>
</li>
</ul>
</li>
<li>
<a href="#creating-a-custom-sort-comparator">Creating a Custom Sort Comparator</a>
</li>
<li>
<a href="#implementing-a-list-sync-layer">Implementing a List Sync Layer</a>
<ul class="toc">
<li>
<a href="#the-sync-method">The <code>sync()</code> Method</a>
</li>
<li>
<a href="#the-parse-method">The <code>parse()</code> Method</a>
</li>
</ul>
</li>
</ul>
                    </div>
                </div>
            

            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="A basic todo list built with the Model, Model List, and View components.">
                                        <a href="../app/app-todo.html">Todo List</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
